<template>
	<view class="uni-load-more" @click="onClick">
		<!-- #ifdef APP-NVUE -->
		<loading-indicator v-if="status === 'loading' && showIcon" :style="{color: color}" :animating="true" class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<svg width="24" height="24" viewBox="25 25 50 50" v-if="(iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" class="uni-load-more__img uni-load-more__img--android-H5">
			<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" stroke-width="3"></circle>
		</svg>
		<view v-else-if="status === 'loading' && showIcon" class="uni-load-more__img uni-load-more__img--ios-H5">
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
		</view>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE || H5 -->
		<view v-if="(iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" class="uni-load-more__img">
			<image class="uni-load-more__img--android" src="" mode="widthFix"></image>
		</view>
		<view v-else-if="status === 'loading' && showIcon" class="uni-load-more__img">
			<image class="uni-load-more__img--ios" src="" mode="widthFix"></image>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-NVUE || H5 -->
		<text class="uni-load-more__text" :style="{color: color}">{{ status === 'more' ? contentText.contentdown : status === 'loading' ? contentText.contentrefresh : contentText.contentnomore }}</text>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE || H5 -->
		<text class="uni-load-more__text">{{ status === 'more' ? contentText.contentdown : status === 'loading' ? contentText.contentrefresh : contentText.contentnomore }}</text>
		<!-- #endif -->
	</view>
</template>

<script>
	const platform = uni.getSystemInfoSync().platform
	export default {
		name: 'UniLoadMore',
		props: {
			status: {
				// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
				type: String,
				default: 'more'
			},
			showIcon: {
				type: Boolean,
				default: true
			},
			iconType: {
				type: String,
				default: 'auto'
			},
			color: {
				type: String,
				default: '#777777'
			},
			contentText: {
				type: Object,
				default () {
					return {
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了'
					}
				}
			}
		},
		data() {
			return {
				platform: platform
			}
		},
		methods: {
			onClick() {
				this.$emit('clickLoadMore', {
					detail: {
						status: this.status,
					}
				})
			}
		}
	}
</script>

<style scoped>
	.uni-load-more {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		height: 40px;
		align-items: center;
		justify-content: center;
	}

	.uni-load-more__text {
		font-size: 15px;
	}

	.uni-load-more__img {
		width: 24px;
		height: 24px;
		margin-right: 8px;
	}

	.uni-load-more__img--nvue {
		color: #666666;
	}

	.uni-load-more__img--android,
	.uni-load-more__img--ios {
		width: 24px;
		height: 24px;
		transform: rotate(0deg);
	}

	/* #ifndef APP-NVUE */
	.uni-load-more__img--android {
		animation: loading-ios 1s 0s linear infinite;
	}

	.uni-load-more__img--ios {
		animation: loading-ios 1s 0s step-end infinite;
	}

	@keyframes loading-android {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-ios {
		0% {
			transform: rotate(0deg);
		}

		8% {
			transform: rotate(30deg);
		}

		16% {
			transform: rotate(60deg);
		}

		24% {
			transform: rotate(90deg);
		}

		32% {
			transform: rotate(120deg);
		}

		40% {
			transform: rotate(150deg);
		}

		48% {
			transform: rotate(180deg);
		}

		56% {
			transform: rotate(210deg);
		}

		64% {
			transform: rotate(240deg);
		}

		73% {
			transform: rotate(270deg);
		}

		82% {
			transform: rotate(300deg);
		}

		91% {
			transform: rotate(330deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* #endif */

	/* #ifdef H5 */
	.uni-load-more__img--android-H5 {
		animation: loading-android-H5-rotate 2s linear infinite;
		transform-origin: center center;
	}

	.uni-load-more__img--android-H5>circle {
		display: inline-block;
		animation: loading-android-H5-dash 1.5s ease-in-out infinite;
		stroke: currentColor;
		stroke-linecap: round;
	}

	@keyframes loading-android-H5-rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-android-H5-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40;
		}

		100% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120;
		}
	}

	.uni-load-more__img--ios-H5 {
		position: relative;
		animation: loading-ios-H5 1s 0s step-end infinite;
	}

	.uni-load-more__img--ios-H5>view {
		position: absolute;
		height: 6px;
		width: 2px;
		left: 11px;
		top: 0;
		transform-origin: 1px 12px;
	}

	/* @for $i from 1 through 12 {
 */
	/* 	.uni-load-more__img--ios-H5>view:nth-child(#{$i}) {
 */
	/* 		transform: rotate(360deg - ($i - 1) * 30deg);
 */
	/* 		opacity: 1 - $i * 0.08;
 */
	/* 	}
 */
	/* }
 */

	.uni-load-more__img--ios-H5>view:nth-child(1) {
		transform: rotate(360deg);
		opacity: 0.92;
	}

	.uni-load-more__img--ios-H5>view:nth-child(2) {
		transform: rotate(330deg);
		opacity: 0.84;
	}

	.uni-load-more__img--ios-H5>view:nth-child(3) {
		transform: rotate(300deg);
		opacity: 0.76;
	}

	.uni-load-more__img--ios-H5>view:nth-child(4) {
		transform: rotate(270deg);
		opacity: 0.68;
	}

	.uni-load-more__img--ios-H5>view:nth-child(5) {
		transform: rotate(240deg);
		opacity: 0.6;
	}

	.uni-load-more__img--ios-H5>view:nth-child(6) {
		transform: rotate(210deg);
		opacity: 0.52;
	}

	.uni-load-more__img--ios-H5>view:nth-child(7) {
		transform: rotate(180deg);
		opacity: 0.44;
	}

	.uni-load-more__img--ios-H5>view:nth-child(8) {
		transform: rotate(150deg);
		opacity: 0.36;
	}

	.uni-load-more__img--ios-H5>view:nth-child(9) {
		transform: rotate(120deg);
		opacity: 0.28;
	}

	.uni-load-more__img--ios-H5>view:nth-child(10) {
		transform: rotate(90deg);
		opacity: 0.2;
	}

	.uni-load-more__img--ios-H5>view:nth-child(11) {
		transform: rotate(60deg);
		opacity: 0.12;
	}

	.uni-load-more__img--ios-H5>view:nth-child(12) {
		transform: rotate(30deg);
		opacity: 0.04;
	}

	@keyframes loading-ios-H5 {
		0% {
			transform: rotate(0deg);
		}

		8% {
			transform: rotate(30deg);
		}

		16% {
			transform: rotate(60deg);
		}

		24% {
			transform: rotate(90deg);
		}

		32% {
			transform: rotate(120deg);
		}

		40% {
			transform: rotate(150deg);
		}

		48% {
			transform: rotate(180deg);
		}

		56% {
			transform: rotate(210deg);
		}

		64% {
			transform: rotate(240deg);
		}

		73% {
			transform: rotate(270deg);
		}

		82% {
			transform: rotate(300deg);
		}

		91% {
			transform: rotate(330deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* #endif */
</style>